<template>
	<view class="content">
		<view class="top">
			<image class="daka-top" src="@/static/img/daka-top.png"></image>
			<view class="top-cont">
				<view class="top-title1">
					<image class="qizi" src="@/static/img/qizi.png"></image>
					<text>我的打卡进度</text>
				</view>
				<view class="top-title2">
					<view class="top-title2-left">
						<view class="waitiao">
							<view class="neitiao" :style="{ width: sum ? (yidaka / sum * 100) + '%' : '0%' }">
								<image class="jinduren" src="/static/img/ren.png"></image>
							</view>
						</view>
						<text>{{yidaka}}/{{sum}}</text>
					</view>
					<view class="ljdk" @click="goDaka">立即打卡</view>
				</view>
			</view>
		</view>

		<view class="box1">
			<view class="box1-title">打卡记录</view>
			<view class="box1-cont">
				<view class="item-box" v-for="(item,index) in checkedScenicList" :key="index">
					<image class="item-img" :src="imgURL+item.photo"></image>
					<view class="item-cont">
						<view class="item-cont-title1 flex-s">
							<text class="t-left">{{item.scenicName||''}}</text>
							<text class="t-right">{{item.createTime}}</text>
						</view>
						<view class="item-cont-title2 flex-s">
							<view class="t2-left">
								<image class="gou1" src="@/static/img/gou1.png"></image>
								<text>已打卡</text>
							</view>
							<view class="t2-right">
								<text>可获得</text>
								<image class="tongqian" src="@/static/img/tongqian.png"></image>
								<text>{{item.scoure||0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box1">
			<view class="box1-title">去打卡</view>
			<view class="box1-cont">
				<view class="item-box" v-for="(item,index) in unCheckedScenicList" :key="index">
					<image class="item-img" :src="imgURL+item.photo"></image>
					<view class="item-cont">
						<view class="item-cont-title1 flex-s">
							<text class="t-left">{{item.scenicName||''}}</text>
						</view>
						<view class="item-cont-title2 flex-s">
							<view class="t2-left">
								<image class="gou1" src="@/static/img/gou2.png"></image>
								<text class="tt2">未打卡</text>
							</view>
							<view class="t2-right">
								<text>可获得</text>
								<image class="tongqian" src="@/static/img/tongqian.png"></image>
								<text>{{item.scoure||0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>



		<view style="width:100%;height:40rpx"></view>

	</view>
</template>

<script>
	import {
		activity

	} from '@/api/common'
	import {
		imgURL
	} from '@/api/config'
	export default {
		components: {


		},
		data() {
			return {
				unCheckedScenicList: [], // 未打卡
				checkedScenicList: [], // 已打卡
				imgURL,
				sum: 0,
				yidaka: 0,
			};
		},

		onLoad() {

		},
		async onShow() {
			await this.getList()
		},

		methods: {
			goDaka() {
				uni.navigateTo({
					// url: `/pages/two/dakaDetail`
					url:`/pages/two/scan`
				})
			},

			getList() {

				activity(uni.getStorageSync('userId')).then(res => {
					if (res.code == 200) {
						this.unCheckedScenicList = res.data.unCheckedScenicList
						this.checkedScenicList = res.data.checkedScenicList
						this.yidaka = this.checkedScenicList.length
						this.sum = this.unCheckedScenicList.length + this.yidaka
						console.log(this.yidaka, this.sum,this.unCheckedScenicList)

					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background: #F6F1E5;
		padding: 24rpx 30rpx;

		.top {
			position: relative;

			.daka-top {
				width: 690rpx;
				height: 326rpx;
			}

			.top-cont {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1;
				padding-top: 96rpx;
				padding-left: 50rpx;

				.top-title1 {
					display: flex;
					align-items: center;
					font-family: SF Pro Display, SF Pro Display;
					font-weight: bold;
					font-size: 32rpx;
					color: #4C604E;
					flex: 1;



					.qizi {
						width: 28rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}

				.top-title2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 86rpx;
					padding-right: 22rpx;

					.top-title2-left {
						display: flex;
						align-items: center;
						font-family: SF Pro Display, SF Pro Display;
						font-weight: bold;
						font-size: 32rpx;
						color: #4C604E;

						.waitiao {
							width: 294rpx;
							height: 22rpx;
							background: #F5F5F5;
							border-radius: 120rpx;
							margin-right: 20rpx;
						}

						.neitiao {
							height: 22rpx;
							background: #006C04;
							border-radius: 120rpx;
							position: relative;

							.jinduren {
								width: 58rpx;
								height: 78rpx;
								position: absolute;
								right: -40rpx;
								top: 50%;
								transform: translate(0, -50%);
							}
						}
					}

					.ljdk {
						width: 174rpx;
						height: 64rpx;
						background: #006C04;
						border-radius: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: SF Pro Display, SF Pro Display;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.box1 {
			margin-top: 30rpx;
			font-family: SF Pro Display, SF Pro Display;

			.box1-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #4C604E;
				margin-bottom: 20rpx;
			}

			.box1-cont {
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;

				.item-box {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.item-img {
						width: 160rpx;
						height: 106rpx;
						border-radius: 20rpx;
					}

					.item-cont {
						padding-left: 20rpx;
						flex: 1;

						.item-cont-title1 {
							.t-left {
								font-weight: bold;
								font-size: 26rpx;
								color: #4C604E;
							}

							.t-right {
								font-weight: 400;
								font-size: 22rpx;
								color: #9E9E9E;
							}
						}

						.item-cont-title2 {
							margin-top: 20rpx;

							.t2-left {
								font-weight: 400;
								font-size: 26rpx;
								color: #39AD22;

								.gou1 {
									width: 24rpx;
									height: 24rpx;
									margin-right: 10rpx;
								}

								.tt2 {

									color: #9E9E9E;
								}
							}

							.t2-right {
								font-weight: 400;
								font-size: 26rpx;
								color: #4C604E;
								display: flex;
								align-items: center;

								.tongqian {
									width: 32rpx;
									height: 32rpx;
									margin-left: 20rpx;
									margin-right: 10rpx;
								}
							}
						}
					}

				}

				.item-box:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>